// 浮动操作按钮组件

import React, { useState } from 'react';
import './FloatingActionButton.css';

interface FloatingActionButtonProps {
  onContactClick: () => void;
  onDisclaimerClick: () => void;
  onAboutClick: () => void;
}

/**
 * 浮动操作按钮组件
 * 右下角固定位置，点击展开三个子按钮
 */
const FloatingActionButton: React.FC<FloatingActionButtonProps> = ({
  onContactClick,
  onDisclaimerClick,
  onAboutClick
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  
  console.log('FloatingActionButton rendered');

  // 切换展开状态
  const toggleExpanded = () => {
    console.log('Main button clicked, current state:', isExpanded);
    setIsExpanded(!isExpanded);
  };

  // 处理子按钮点击
  const handleSubButtonClick = (callback: () => void) => {
    console.log('Sub button clicked');
    callback();
    setIsExpanded(false); // 点击后收起菜单
  };

  return (
    <div className="floating-action-container">
      {/* 子按钮 */}
      <div className={`sub-buttons ${isExpanded ? 'expanded' : ''}`}>
        <button 
          className="sub-button contact"
          onClick={() => handleSubButtonClick(onContactClick)}
          title="联系我们"
        >
          <span className="sub-button-icon">📞</span>
          <span className="sub-button-text">联系</span>
        </button>
        
        <button 
          className="sub-button disclaimer"
          onClick={() => handleSubButtonClick(onDisclaimerClick)}
          title="免责声明"
        >
          <span className="sub-button-icon">⚠️</span>
          <span className="sub-button-text">免责声明</span>
        </button>
        
        <button 
          className="sub-button about"
          onClick={() => handleSubButtonClick(onAboutClick)}
          title="关于我们"
        >
          <span className="sub-button-icon">ℹ️</span>
          <span className="sub-button-text">介绍</span>
        </button>
      </div>
      
      {/* 主按钮 */}
      <button 
        className={`main-button ${isExpanded ? 'expanded' : ''}`}
        onClick={toggleExpanded}
        title={isExpanded ? '收起菜单' : '展开菜单'}
      >
        <span className="main-button-icon">
          {isExpanded ? '✕' : '☰'}
        </span>
      </button>
      
      {/* 遮罩层 */}
      {isExpanded && (
        <div 
          className="floating-overlay"
          onClick={() => setIsExpanded(false)}
        />
      )}
    </div>
  );
};

export default FloatingActionButton;